<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>订单</title>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
	<link rel="stylesheet" href="__PUBLIC__/client/css/cui.css?sj={$tj}" />
	<link rel="stylesheet" href="__PUBLIC__/client/css/swiper.min.css" />
	<link rel="stylesheet" href="__PUBLIC__/client/css/style.css?sj={$tj}" />
	<script type="text/javascript" src="__PUBLIC__/client/js/jquery.js?sj={$tj}"></script>
	<script type="text/javascript" src="__PUBLIC__/client/js/lib.js?sj={$tj}"></script>
	<script type="text/javascript" src="__PUBLIC__/client/js/swiper.jquery.min.js"></script>
	<style type="text/css">
		html,body{overflow:hidden;}
		.ul-tab3 {width: 200%;}
		.ul-tab3 .bjs{
			width: 80px;
			padding: 0px 10px;
			font-size: 14px;
    			height: 45px;
		}
		.ul-tab3 .bjs a{
			    line-height: 45px;
			    display: block;
			    color: #333;
		}
		.ul-tab3 .on{
			
			background: #47b8e1;
		}
		.ul-tab3 .on a{color: #fff;}
	</style>
</head>
<body class="mhome">
	<div class="viewport">
		<div id="bd" class="fix">
			<div class="swiper-container">
				<div class="swiper-wrapper ul-tab3">
					
					<div class="swiper-slide bjs <if condition='$typeid eq 1'>on</if>" ><a href="{:U('Client/order/orderlist',array('typeid'=>1))}">普洗袋洗</a></div>
					<div class="swiper-slide bjs <if condition='$typeid eq 2'>on</if> "><a href="{:U('Client/order/orderlist',array('typeid'=>2))}">品牌精洗</a></div>
					<div class="swiper-slide bjs <if condition='$typeid eq 3'>on</if> " style="width: 50px;"><a href="{:U('Client/order/orderlist',array('typeid'=>3))}">洗鞋</a></div>
					<div class="swiper-slide bjs <if condition='$typeid eq 4'>on</if> "><a href="{:U('Client/order/orderlist',array('typeid'=>4))}">洗涤救治</a></div>
					<div class="swiper-slide bjs <if condition='$typeid eq 5'>on</if> "><a href="{:U('Client/order/orderlist',array('typeid'=>5))}">家政服务</a></div>
					<div class="swiper-slide bjs <if condition='$typeid eq 6'>on</if> " style="width: 90px;"><a href="{:U('Client/order/orderlist',array('typeid'=>6))}">奢侈品洗护</a></div>
				</div>
			</div>

            <ul class="ul-orders">
            		<volist name="orderlist" id="vo">
					<li>
					<a href="{:U('Client/order/orderinfo',array('orderid'=>$vo['orderid']))}">
                    		<div class="top" style="color: #555;">{$vo.shopname|default="等待店铺服务确认"}</div> 
	                    <div class="con">
	                        <div class="pic"><img src="__PUBLIC__/client/images/order/i_myorder.png" alt="" style="width: 50px; height: 50px;"></div>
	                        <p style="color: #666;"> {$vo.pickup_date}, 提交一个 "
	                        	<foreach name="entry" item="vos" > 
	                        		<if condition="$key eq $vo['wash_type']">  {$vos} </if> 
	                        	</foreach> 
	                        	" 预约服务  </p>
	                    </div>
                    </a>
                    <div class="bot">
                    	
                    		<if condition="$vo['status'] eq 0">	<!-- 刚下单的 -->
                    			 <a  href="javascript:;" class="quxiaoorder"  data-orderid="{$vo.orderid}" data-set="9">取消</a>
                    		<elseif condition="$vo['status'] eq 1"/> <!--已抢单 待取衣的 -->
                    			 <!--<a  href="javascript:;" class="pay" data-orderid="{$vo.orderid}" >支付</a>-->
                    		<elseif condition="$vo['status'] eq 2"/> <!-- 确认衣物 可以支付 -->
                    			 <a  href="javascript:;" class="pay" data-orderid="{$vo.orderid}" >支付</a>
                    		<elseif condition="$vo['status'] eq 3"/> <!-- 拿去洗了 待收衣 -->
                    			 <!--<a  href="javascript:;"  data-orderid="{$vo.orderid}" >送洗中</a>-->
                    		<elseif condition="$vo['status'] eq 4"/> <!-- 点评洗衣服务-->
                    		 	 <!--<a  href="javascript:;"  data-orderid="{$vo.orderid}" >洗涤中</a>-->
                    		<elseif condition="$vo['status'] eq 5"/> <!-- 完成的 -->
                    			 <a  href="javascript:;" class="querensouyi" data-orderid="{$vo.orderid}" >确认收衣</a>
                    		<elseif condition="$vo['status'] eq 9"/> <!-- 已取消的 -->
                    			 <a  href="{:U('Client/index/index')}" >再次预约</a>
                    		<else />
                    		
                    		</if> 
                    		
                        <span>
	                        	<foreach name="ordertype" item="vos" >
	                        		<if condition="$key eq $vo['status']"> 
	                        			 {$vos} 
	                        			 <if condition="$key eq 2">
		                        			（{$vo.total_price}元）
		                        		<elseif condition="$key eq 3" />
		                        			（实付款：{$vo.pay_price}元）
		                        		<elseif condition="$key eq 5" />
		                        			（实付款：{$vo.pay_price}元）
		                        		<elseif condition="$key eq 6" />
		                        			（实付款：{$vo.pay_price}元）
		                        		</if>
		                        		
	                        		</if>
	                        	</foreach> 
                        </span>

                    </div>
                </li>
				</volist>
                
                <!--<li>
                    <div class="top">挺赞88洗衣-湖北路店</div> 
                    <div class="con">
                        <div class="pic"><img src="__PUBLIC__/client/images/u18.png" alt=""></div>
                        <a href="">11月3日，提交一个"羽绒服"的预约服务 (2件) </a>
                    </div>
                    <div class="bot">
                        <a href="">确认收件</a>
                        <span>待送衣（实付款：￥90.00）</span>
                    </div>
                </li>
                <li>
                    <div class="top"><a href="">删</a>挺赞88洗衣-湖北路店</div> 
                    <div class="con">
                        <div class="pic"><img src="__PUBLIC__/client/images/u18.png" alt=""></div>
                        <a href="">11月3日，提交一个"羽绒服"的预约服务 (2件) </a>
                    </div>
                    <div class="bot">
                        <a href="">评价</a>
                        <span>已完成（实付款：￥90.00）</span>
                    </div>
                </li>-->
            </ul>
		</div>
		<!--end #bd-->
		<footer>
			<div class="fd-nv">
				<ul>
					<li class="s1"><a href="{:U('Client/index/index')}">首页</a></li>
					<li class="s2 on"><a href="{:U('Client/order/orderlist')}">订单</a></li>
					<li class="s3"><a href="{:U('Client/wo/index')}">我的</a></li>
				</ul>
			</div>
		</footer>
	</div>

<style>
	#address_box{
		border-radius:9px;
	}
	#address_box p{
		padding-bottom: 10px;
		text-align: center;
	}
	#address_box ul li span.add_info {
		float: none;
		margin-top: 0px;
	}
	#address_box .caidan{
		display: block;
		width: 50%;
		float: left;
		text-align: center;
		padding: 0px;
		margin: 0px;
	}
	#address_box .xian{
		border-right: 1px solid #eee;
	}
</style>

<div id="order_bg"></div>
	<div id="address_box" style="z-index:9999;">
		<p>金额：99元</p>
		<ul id="address_box_ul">
				<li>		
					<span class="add_info" >
						<i class="sel" data-type = "wx"></i>微信
						<div class="c"></div>
					</span>
				</li>
				<li>		
					<span class="add_info" >
						<i class="" data-type = "zfb"></i>支付宝 
						<div class="c"></div>
					</span>
				</li>
		</ul>
		<span class="caidan xian"> <a href="javascript:;" id="guanbi">取消</a> </span>
		<span class="caidan">  <a href="javascript:;" id="zfpay" data-order="" data-paytype = "wx">支付</a>  </span>
	</div>

<script src="__PUBLIC__/business/js/normal.js"></script>
<script>
var mySwiper = new Swiper('.swiper-container',{
	slidesPerView : 'auto',
})

$(function(){
	var boxH = $('#address_box').height();
	$('#address_box').css('top',($(window).height()-boxH-10)/3);
	$('#address_box').css('width',$(window).width()-100);
	$('#address_box').css('left',50);
	$('#address_box li').on('click',function(){
		$('#address_box li').find('i').removeClass('sel');
		$(this).find('i').addClass('sel');
		var type=$(this).find('i').data('type');
		$('#address_box #zfpay').data('paytype',type);
	});
	
	$('#guanbi').on('click',function(){
		$('#order_bg').hide();
		$('#address_box').hide();
	});
	//=============================
		//取消订单
		$('.quxiaoorder').on('click',function(){
			var sets=$(this).attr('data-set');
			var orderid=$(this).attr('data-orderid');
			var tourl="{:U('Client/api/order_set')}";
   			var data={orderid:orderid,set:sets}
   			$.post(tourl,data,function(data){
			   if(data.status!=1){
			    		Msg('取消失败!',2);
			    }else{
			    		Msg('取消成功!',1);
			    		setTimeout(function(){
						window.location.href="{:U('Client/order/orderlist')}"; 
					},1000);
			    }
			 });
		});
		
		//支付前获取订单金额 选择支付方式
		$('.pay').on('click',function(){
			var orderid=$(this).attr('data-orderid');
			var tourl="{:U('Client/api/get_order')}";
   			var data={orderid:orderid};
   			$.post(tourl,data,function(data){
   				if(data.status==1){
   					$('#address_box p').html(data.msg.total_price+'元');
   					$('#address_box #zfpay').data('orderid',orderid);
   					$('#order_bg').show();
					$('#address_box').show();
   				}else{
   					Msg('获取订单金额失败!',2);
   				}
   			});
		});
		//跳转到支付页面
		$('#zfpay').on('click',function(){
			var orderid=$('#address_box #zfpay').data('orderid');
   			var paytype=$('#address_box #zfpay').data('paytype');
   			var url="{:U('Client/order/pay')}"+"/orderid/"+orderid+"/paytype/"+paytype; 
   			window.location.href=url;
		});
		
		//确认收衣
		$('.querensouyi').on('click',function(){
			var orderid=$(this).attr('data-orderid');
			var tourl="{:U('Client/api/order_qrset')}";
   			var data={orderid:orderid}
   			$.post(tourl,data,function(data){
			   if(data.status!=1){
			    		Msg('取消失败!',2);
			    }else{
			    		Msg('确认订单成功!',1);
			    		setTimeout(function(){
						window.location.href="{:U('Client/order/orderlist')}"; 
					},1000);
			    }
			 });
			 //=========
		});
});
</script>
</body>
</html>